<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NvsClient</title>

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.17.custom.css" type="text/css">
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>

<script type="text/javascript" src="js/underscore-min.js"></script>

<link rel="stylesheet" type="text/css" href="style/default.css"/>
<script type="text/javascript" src="NvsClientCtrl.js"></script>
<script type="text/javascript" src="demo_some.js"></script>


<style>
	#login-dialog label, input { display:block; }
	input.text { margin-bottom:12px; width:95%; padding: .4em; }
	fieldset { padding:0; border:0; margin-top:15px; }
	
</style>

</head>

<body>
<div id="container">

<div id="header">
<div id="tab-nav">
<ul>
	<li><a href="javascript:void(0)" data-href="#page-live"><span>实时预览</span></a></li>
	<li><a href="javascript:void(0)" data-href="#page-record"><span>录像回放</span></a></li>
	<li><a href="javascript:void(0)" data-href="#page-file"><span>本地回放</span></a></li>
	
</ul>
</div>

<div id="app-nav">
<div id="msg-nav">
<span id="msg-span"></span>
</div>

<div style="clear: both"></div>
</div>

</div>

<div id="content">

<div id="sidebar">
	<div id="page-live" class="panel">
	
	<div id="login-dialog" title="登录">
	<form>
		<fieldset>
			<label for="ip">服务器IP</label>
			<input type="text" name="ip" id="ip" value="47.93.44.39" class="text ui-widget-content" />
			<label for="port">服务器端口</label>
			<input type="text" name="port" id="port" value="11111" class="text ui-widget-content" />
			<label for="username">用户名</label>
			<input type="text" name="username" id="username" value="lskj_everybody_a" class="text ui-widget-content" />
			<label for="passwd">密码</label>
			<input type="text" name="passwd" id="passwd" value="123456" class="text ui-widget-content" />
			<p><input type="button" id="btn-login" value="登录"/></p>
		</fieldset>
	</form>
	<p class="validate-tip"></p>
	</div>

	<hr/>
	<p>设备备ID</p>
	<input type="text" name="device" id="input-device" value="2200001202000801" class="text ui-widget-content" />
	<p><input type="button" id="btn-open-live" value="实时预览"/></p>
	<span><input type="checkbox" id="btn-open-face" />人脸轨迹</span>
	<hr/>
	
	<div id="ptz-dir">
		<div class="indent-div">
		<img id="btn-up" class="img-button ptz-button" src="image/up.png"/>
		</div>
		<div>
		<img id="btn-left" class="img-button ptz-button" src="image/left.png"/>
		<img id="btn-right" class="img-button ptz-button" src="image/right.png"/>
		</div>
		<div class="indent-div">
		<img id="btn-down" class="img-button ptz-button" src="image/down.png"/>
		</div>
	</div>
	
	<div id="ptz-zoom">
		<div id="slider-ptz"></div>
		<img id="btn-zoom-in" class="img-button ptz-button" src="image/zoom-in.png" alt="in" title="in"/>
		<img id="btn-zoom-out" class="img-button ptz-button" src="image/zoom-out.png" alt="out" title="out"/>
		<img id="btn-focus-far" class="img-button ptz-button" src="image/focus-far.png" alt="far" title="far"/>
		<img id="btn-focus-near" class="img-button ptz-button" src="image/focus-near.png" alt="near" title="near"/>
	</div>
	
	<div style="clear: both"></div>
	<hr/>

	<input type="button" id="btn-draw-none" value="禁止绘制"/>
	<input type="button" id="btn-draw-rect" value="绘制矩形"/>
	<input type="button" id="btn-draw-polygon" value="绘制多边形"/>
	<input type="button" id="btn-draw-clear" value="清理图形"/>
	<input type="button" id="btn-draw-get" value="获取图形"/>
	<input type="button" id="btn-draw-set" value="加载图形"/>

	<hr/>
		
	
	</div>
	<div id="page-record" class="panel">
	<div id="tool-record">
		<p>开始时间: <input type="text" id="start-datepicker" class="text ui-widget-content"></p>
		<p>结束时间: <input type="text" id="stop-datepicker" class="text ui-widget-content"></p>
		
		<p>设备ID</p>
		<input type="text" name="device" id="input-record-device" value="2200001202000801" class="text ui-widget-content" />

		<p><input type="button" id="btn-open-query" value="查询录像"/></p>
		<p><input type="button" id="btn-open-stop" value="停止下载"/></p>

		<hr/>

		<div id="result-file">
		<ul>
		
		</ul>
		</div>
	</div>
	<div id="result-record">
	<ul>
	</ul>
	</div>
	</div>
	<div id="page-file" class="panel">
	<div id="tool-file">
		<p>文件路径</p>
		<input type="text" name="filepath" id="input-filepath" value="f:\media\love.mp4" class="text ui-widget-content" />
		<p><input type="button" id="btn-open-file" value="打开文件"/></p>
		<hr/>
	</div>
	<div id="result-file">
	<ul>
	
	</ul>
	</div>
	</div>
</div>

<div id="video-frame">
	<div id="video-ctrl">
		<div class="player">
			<object classid="clsid:3DBC06D7-C993-43FC-833A-986FBB97C5AF"
	 		standby="Waiting..." id="ocxPlayer1" class="ocxPlayer" name="player" width="100%" height="100%">
			</object>
		</div>
	
		<div class="player">
			<object classid="clsid:3DBC06D7-C993-43FC-833A-986FBB97C5AF"
	 		standby="Waiting..." id="ocxPlayer2" class="ocxPlayer" name="player" width="100%" height="100%">
			</object>
		</div>

		<div style="height:4px; clear: both;"></div>

		<div class="player">
			<object classid="clsid:3DBC06D7-C993-43FC-833A-986FBB97C5AF"
	 		standby="Waiting..." id="ocxPlayer3" class="ocxPlayer" name="player" width="100%" height="100%">
			</object>
		</div>
	
		<div class="player">
			<object classid="clsid:3DBC06D7-C993-43FC-833A-986FBB97C5AF"
	 		standby="Waiting..." id="ocxPlayer4" class="ocxPlayer" name="player" width="100%" height="100%">
			</object>
		</div>

	</div>
	<div id="video-bar">
		<div>
		
		<img id="btn-play" class="img-button" src="image/play.png"/>
		<img id="btn-pause" class="img-button" src="image/pause.png"/>
		<img id="btn-stop" class="img-button" src="image/stop.png"/>
		<img id="btn-slow" class="img-button" src="image/backward.png"/>
		<img id="btn-fast" class="img-button" src="image/forward.png"/>
		<img id="btn-sound" class="img-button" src="image/sound.png"/>
		<img id="btn-snap" class="img-button" src="image/snap.png"/>
		<img id="btn-ratio" class="img-button" src="image/ratio.png"/>
		</div>
	</div>
</div>

</div>

<div id="footer">

</div>

</div>



</body>

<script type="text/javascript">

$(document).ready(function(){
    
    initTab();
	
	initDatePicker();
	
	$('#btn-login').click(onBtnLogin);

	$('#btn-open-file').click(onBtnOpenFile);
	$('#btn-open-live').click(onBtnOpenLive);
	$('#btn-open-query').click(onBtnQueryRecord)
	$('#btn-open-stop').click(onBtnStopRecord);
	
	$('#btn-open-face').click(onBtnEnableFace);

	$('#btn-play').click(onBtnPlay);
	$('#btn-pause').click(onBtnPause);
	$('#btn-stop').click(onBtnStop);
	$('#btn-slow').click(onBtnSlow);
	$('#btn-fast').click(onBtnFast);
	$('#btn-sound').click(onBtnSound);
	$('#btn-snap').click(onBtnSnap);
	$('#btn-ratio').click(onBtnRatio);
	
	$('#btn-draw-none').click(onBtnDrawNone);
	$('#btn-draw-rect').click(onBtnDrawRect);
	$('#btn-draw-polygon').click(onBtnDrawPolygon);
	$('#btn-draw-clear').click(onBtnDrawClear);
	$('#btn-draw-get').click(onBtnDrawGet);
	$('#btn-draw-set').click(onBtnDrawSet);
	


	initPtzUI();
	
	if (!IsActiveXSupported()) {
		alert("请使用IE内核的浏览器");
		return;
	}
	
	if (!detectOcxSetup()) {
		alert("NvsClientCtrl控件没有安装.");
		
		$('#ocxPlayer').hide();
		$('#video-ctrl').append('<h1><a href="NvsClientCtrl.exe">安装控件</a></h1>');
		return;
	}
		
	initOcx();

	//login(server.ip, server.port, "webdemo", "webdemo");
	//onLoginSuccess();
		
	
});

function initPtzUI() {
	$('#slider-ptz').slider({
		min: 1,
		max: 10,
		step: 1,
		value: 2
	});
	
	$('.ptz-button').mousedown(onPtzBtnDown).mouseup(onPtzBtnUp);
	
	$('#btn-up').data("command", nvs.PTZCommand.PTZ_CMD_UP);
	$('#btn-down').data("command", nvs.PTZCommand.PTZ_CMD_DOWN);
	$('#btn-left').data("command", nvs.PTZCommand.PTZ_CMD_LEFT);
	$('#btn-right').data("command", nvs.PTZCommand.PTZ_CMD_RIGHT);
	$('#btn-zoom-in').data("command", nvs.PTZCommand.PTZ_CMD_ZOOM_IN);
	$('#btn-zoom-out').data("command", nvs.PTZCommand.PTZ_CMD_ZOOM_OUT);
	$('#btn-focus-far').data("command", nvs.PTZCommand.PTZ_CMD_FOCUS_IN);
	$('#btn-focus-near').data("command", nvs.PTZCommand.PTZ_CMD_FOCUS_OUT);
	
}

function initDatePicker() {
	$('#start-datepicker').datepicker({
		dateFormat: 'yy-mm-dd'
	});

	$('#stop-datepicker').datepicker({
		dateFormat: 'yy-mm-dd'
	});
	
	var curDate = new Date();
	var prevDate = new Date(curDate.valueOf() - 1000 * 3600 * 24 * 1);
	$('#start-datepicker').datepicker("setDate" , prevDate);
	$('#stop-datepicker').datepicker("setDate" , curDate);
	

}


function showTabContent(idx) {
	$('#sidebar .panel').hide();
	var ids = ['#page-live', '#page-record', '#page-file'];
	$(ids[idx]).show();
	
	if (idx == 1) {
	}
}

function initTab() {
	var activeIndex = 0;
	$('#tab-nav').tabs({
		selected: activeIndex,
		select: function(event, ui) {
			showTabContent(ui.index);
			return true;
		}
	});
	
	showTabContent(activeIndex);
}


</script>

</html>